import { StyleSheet, Text, View, ImageBackground, ScrollView, Image, TextInput, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FocusAwareStatusBar } from '~/components';
import { px2dp, scale } from '~/utils/px2dp';
import { isEmailValid } from '~/utils/rules';
import { useNavigation, useRoute } from '@react-navigation/native';
import { sendRetrieveVerifyEmail } from '~/api/loginApi';

export default function EmailRegister() {
    const { t } = useTranslation();
    const navigation = useNavigation<any>();
    const router = useRoute<any>();
    const { type = 'register' } = router.params;
    const [formData, setFormData] = useState({
        email: '',
        pwd: '',
        confirm_pwd: '',
    });

    const submit = () => {
        if (!formData.email && !formData.pwd) {
            Toast.show({ content: t('EmailRegister.t1'), layout: 'top' });
            return;
        }
        // if (!isEmailValid(formData.email)) {
        //     Toast.show({ content: t('EmailRegister.t2'), layout: 'top' });
        //     return;
        // }
        if (formData.confirm_pwd !== formData.pwd) {
            Toast.show({ content: t('EmailRegister.t3'), layout: 'top' });
            return;
        }
        sendRetrieveVerifyEmail({ email: formData.email }).then((res) => {
            if (res.status == 1) {
                navigation.navigate('CheckEmailCode', { type, uid: res.uid, email: formData.email, pwd: formData.pwd });
            } else {
                Toast.show({ content: t('EmailRegister.t2'), layout: 'top' });
            }
        });
    };
    return (
        <View style={styles.container}>
            <FocusAwareStatusBar translucent={true} />
            <ImageBackground style={styles.bg} source={require('~/assets/login/bg4.png')}>
                <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle}>
                    <TouchableOpacity style={styles.close} onPress={() => navigation.goBack()}>
                        <Icon name={'close-sharp'} size={px2dp(60)} color={'#fff'}></Icon>
                    </TouchableOpacity>
                    <View style={styles.content}>
                        <Image
                            resizeMode="contain"
                            style={styles.logoImage}
                            source={{
                                uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/10/eecd820251009135831105.png',
                            }}
                        />
                        <Text style={styles.title}>
                            {type == 'register' ? t('EmailRegister.t4') : t('EmailRegister.t5')}
                        </Text>
                        <View style={[styles.input]}>
                            <TextInput
                                style={styles.inputStyle}
                                placeholder={t('EmailRegister.t6')}
                                returnKeyType={'done'}
                                value={formData.email}
                                onChangeText={(val) => {
                                    setFormData({
                                        ...formData,
                                        email: val,
                                    });
                                }}
                                placeholderTextColor={'#a4a4a4'}
                            />
                        </View>
                        <View style={[styles.input, { marginTop: px2dp(48) }]}>
                            <TextInput
                                style={styles.inputStyle}
                                placeholder={t('EmailRegister.t7')}
                                returnKeyType={'done'}
                                value={formData.pwd}
                                secureTextEntry={true}
                                onChangeText={(val) => {
                                    setFormData({
                                        ...formData,
                                        pwd: val,
                                    });
                                }}
                                placeholderTextColor={'#a4a4a4'}
                            />
                        </View>
                        <View style={[styles.input, { marginTop: px2dp(48) }]}>
                            <TextInput
                                style={styles.inputStyle}
                                placeholder={t('EmailRegister.t8')}
                                returnKeyType={'done'}
                                value={formData.confirm_pwd}
                                secureTextEntry={true}
                                onChangeText={(val) => {
                                    setFormData({
                                        ...formData,
                                        confirm_pwd: val,
                                    });
                                }}
                                placeholderTextColor={'#a4a4a4'}
                            />
                        </View>
                        <TouchableOpacity style={[styles.bt, styles.row]} onPress={submit}>
                            <Text style={styles.bt_text}>{t('EmailRegister.t9')}</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
    },
    contentContainerStyle: {
        flexGrow: 1,
    },
    close: {
        position: 'absolute',
        top: '5%',
    },
    logoImage: {
        width: px2dp(240),
        height: px2dp(200),
        marginBottom: px2dp(80),
    },

    title: {
        color: '#fff',
        fontSize: px2dp(40),
        fontWeight: 'bold',
        marginBottom: px2dp(32),
    },
    bg: {
        flex: 1,
        resizeMode: 'contain',
        paddingHorizontal: px2dp(24),
        position: 'relative',
    },
    content: {
        flex: 1,
        marginTop: '40%',
    },
    input: {
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.12)',
        borderRadius: px2dp(16),
        paddingHorizontal: px2dp(16),
        height: px2dp(100),
        justifyContent: 'center',
        marginTop: px2dp(16),
    },
    inputStyle: {
        fontSize: scale(28),
        color: '#fff',
    },
    bt: {
        justifyContent: 'center',
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.12)',
        height: px2dp(96),
        marginTop: px2dp(97),
        borderRadius: px2dp(16),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
